<template>
  <div id="map"></div>
</template>
 
<script>
export default {
  name: "MapComponent",
  data() {
    return {
      geojsonData: {
        // 你的GeoJSON数据对象
      }
    };
  },
  async mounted() {
    var map;
    SGMap.tokenTask
      .login(
        "4b9985a37eef391f9ff32c696819f605",
        "ee7b92c92455300896b732377a662077"
      )
      .then(function() {
        initMap();
      });
    function initMap() {
      // 1. 新版底图只支持SDK 3.0.0 以上版本使用，低于 3.0.0 版本请使用 Streets 底图样式
      // 2. 如果访问Streets-v2底图提示没有数据权限，请使用Streets底图样式
      map = new SGMap.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets-v2",
        // 默认缩放层级
        zoom: 11,
        // 地图中心点
        zoom: 16,
        center: [104.06932, 30.65999],
        zoom: 13
      });
      map.on("load", function() {
        map.on("zoom", e => {
          // console.log(44, e);
          // var features = map.queryRenderedFeatures({
          //   layers: ["china"] // 你的矢量图层ID
          // });
          // console.log(18, map.getSource("states"));
        });
        map.on("click", e => {
          var width = 10;
          var height = 10;
          var features = map.queryRenderedFeatures(
            [
              [e.point.x - width / 2, e.point.y - height / 2],
              [e.point.x + width / 2, e.point.y + height / 2]
            ],
            { layers: ["states-join"] }
          );
          console.log(471, features);
          if (features.length > 0) {
            console.log(62, features);
            map.setPaintProperty("states-join", "line-color", "green");
          } else {
            map.setPaintProperty("states-join", "line-color", "#0088cc");
          }
        });
        map.addSource("states", {
          type: "vector",
          //url: "mapbox://mapbox.us_census_states_2015"
          // 'scheme': 'tms',TMS
          tiles: [
            "http://localhost:8080/geoserver/textXXX/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=textXXX:roads&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/vnd.mapbox-vector-tile&TILECOL={x}&TILEROW={y}"
          ]
        });
        map.addLayer({
          id: "states-join",
          type: "line",
          source: "states",
          "source-layer": "roads",
          paint: {
            "line-width": 1,
            // "line-dasharray": [2, 2],
            "line-color": "#0088cc"
            // "line-blur": 1
          }
        });
      });
    }
  }
};
</script>
 
<style>
#map {
  width: 100%;
  height: 100%;
}
</style>